<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
         <el-col :span="24" class="mb20">
         <el-form-item label="账户类型" prop="accountName">
           <el-select v-model="form.accountTypeId" placeholder="请选择账户类型" style="width: 240px">
             <el-option-group
                 v-for="group in propertyOptions"
                 :key="group.label"
                 :label="group.label"
             >
               <el-option
                   v-for="item in group.options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
               />
             </el-option-group>
           </el-select>
         </el-form-item>
         </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item label="账户名称" prop="accountName">
        <el-input v-model="form.accountName" placeholder="请输入账户名称"/>
      </el-form-item>
      </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item label="账户余额" prop="balance">
        <el-input-number :step="0.01" v-model="form.balance" placeholder="请输入账户余额"/>
      </el-form-item>
      </el-col>

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="AccountsDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj, validateExist } from '/@/api/account/accAccounts'
import { rule } from '/@/utils/validate';
import {getAccountTypeByUserId} from "/@/api/account/accAccountType";
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
const property = ref('')
const propertyOptions = ref([]) as any


// 定义字典

// 提交表单数据
const form = reactive({
		id:'',
	  userId: '',
	  accountName: '',
	  accountNumber: '',
    accountTypeId: '',
	  balance: '',
});

// 定义校验规则
const dataRules = ref({
    accountName: [{  trigger: 'blur' }],
    accountNumber: [{ validator: rule.number, trigger: 'blur' }],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  // 获取accounts信息
  if (id) {
    form.id = id
    getAccountsData(id)
  }

  // 获取资产类型
  getAccountTypeByUserId().then(res => {
    const {data} = res
    propertyOptions.value = []

    propertyOptions.value.push({
      label: '资金账户',
      options: data[1].map((i: any) => {
        return {
          label: i.name,
          value: i.id
        }
      })
    })

    propertyOptions.value.push({
      label: '信用卡账户',
      options: data[2].map((i: any) => {
        return {
          label: i.name,
          value: i.id
        }
      })
    })

    propertyOptions.value.push({
      label: '充值账户',
      options: data[3].map((i: any) => {
        return {
          label: i.name,
          value: i.id
        }
      })
    })

    propertyOptions.value.push({
      label: '投资理财账户',
      options: data[4].map((i: any) => {
        return {
          label: i.name,
          value: i.id
        }
      })
    })

    propertyOptions.value.push({
      label: '债务',
      options: data[5].map((i: any) => {
        return {
          label: i.name,
          value: i.id
        }
      })
    })
    console.log('获取资产类型-0', propertyOptions)

    /*data[1].forEach((item: any) => {
      console.log('A',item)
      propertyOptions.value.push({
        label: item.property,
        options: item.map((i: any) => {
          return {
            label: i.name,
            value: i.id
          }
        })
      })
    })*/

    console.log('获取资产类型-2', propertyOptions)
  })
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
    loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? '修改成功' : '添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getAccountsData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj({id: id}).then((res: any) => {
    Object.assign(form, res.data[0])
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>
